<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>一封信</title>
		<style>
			* {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}

			.bg {
				width: 100vw;
				height: 100vh;
				overflow: hidden;
				background-color: #e9e9e9;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			@keyframes circleMove {
				0% {
					width: 300px;
					height: 300px;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, 0.6);
				}

				50% {
					width: 600px;
					height: 600px;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, 0.4);
				}

				100% {
					width: 100vw;
					height: 100vh;
					border-radius: 0;
					background-color: rgba(255, 255, 255, 0);
				}
			}

			.circle {
				width: 300px;
				height: 300px;
				border-radius: 50%;
				justify-content: center;
				align-items: center;
				display: flex;
				background-color: rgba(255, 255, 255, 0.6);
			}

			.move {
				animation: circleMove 1s linear 1;
			}

			.triangle {
				width: 0px;
				height: 0px;
				margin: 100px auto;
				border-top: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid transparent;
				border-left: 70px solid #fff;
				border-radius: 6px;
				transform: translateX(40px);
				cursor: pointer;
				transition: all 0.3s;
			}

			.triangle:hover {
				transform: translate(40px, -3px);
			}

			.text-left {
				width: 30%;
				height: 100%;
				font-size: 20px;
				color: #000;
				font-weight: 400;
				border-radius: 6px;
				padding: 30px;
				text-align: left;
				overflow: auto;
				box-shadow: 0px 0px 30px #e6e6e6;
			}

			.text-right {
				width: 50%;
				height: 100%;
				background-color: #000;
				border-radius: 6px;
			}

			.text-container {
				display: none;
				position: fixed;
				width: 100%;
				height: 100vh;
				background-color: #fff;
				padding: 50px;
			}

			#audio {
				display: none;
			}
		</style>
	</head>

	<body>
		<audio id="audio" controls src="./gant.mp3"></audio>

		<div class="bg">
			<div class="circle">
				<div class="triangle"></div>
			</div>
			<div class="text-container">
				<div class="text-left"></div>
				<!-- <div class="text-right"></div> -->
			</div>
		</div>

		<script>
			const audio = document.querySelector('#audio');
			const triangle = document.querySelector('.triangle');
			const circle = document.querySelector('.circle');
			const text = document.querySelector('.text-container');
			const textRoot = document.querySelector('.text-left');

			let timer = null;
			function writer(el, str = '美好如约而至!', delay = 100) {
				let index = 0;
				timer = setInterval(() => {
					const text = str.slice(0, index);
					el.innerHTML = text;
					index++;
					if (str.length + 1 === index) clearInterval(timer);
				}, delay);
			}

			const str = `
			你不需要给我任何答案 
			我说的这些话 
			只是想让你知道 
			我还坚持着喜欢你 
			只是想让你知道 
			在你身上我不想留下任何遗憾 
			只想让你知道 
			我真的很喜欢你 
			你不知道你回信息特别慢的时候我都不想说话 
			我爱你
			我们一定要一直一直在一起❤
			`;

			triangle.addEventListener('click', () => {
				audio.play();
				circle.classList = 'move';
				triangle.style.display = 'none';
				setTimeout(() => {
					text.style.display = 'block';
					writer(textRoot, str);
				}, 3000);
			});
		</script>
	</body>
</html>
